<template>
  <div class="banner">
    <!-- setopacity用于设置随页面滚动调整透明度 -->
    <Banner :componentOpacity="this.setopacity"></Banner>
  </div>
  <div class="carousel">
    <Carousel :componentOpacity="this.setopacity"></Carousel>
  </div>
  <div class="statis">
    <Cube></Cube>
    <n-row>
      <n-col :span="8">
        <n-statistic label="用户数" :value="132"> </n-statistic>
      </n-col>
      <n-col :span="8">
        <n-statistic label="访客量"> 4555 </n-statistic>
      </n-col>
      <n-col :span="8">
        <n-statistic label="新增代码量"> 400 </n-statistic>
      </n-col>
    </n-row>
  </div>

  <div>
    <h5>we could do everything</h5>
    <p>期待你的到来</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Banner from "@/components/index/Banner.vue";
import Carousel from "@/components/index/Carousel.vue";
import Cube from "@/components/index/Cube.vue";

export default defineComponent({
  name: "Home",
  setup() {
    let setopacity = ref(1);
    window.addEventListener("scroll", () => {
      //后面要请求屏幕高度，通过此动态调整可见度
      setopacity.value = 1 - document.documentElement.scrollTop / 600;
    });
    return {
      setopacity,
    };
  },
  components: {
    Banner,
    Cube,
    Carousel,
  },
});
</script>

<style scoped>
.statis {
  padding: 0 10%;
}
</style>
